<template>
	<view class="container">
		<!-- 活动标题 -->
		<view class="notice-header">
			<view class="notice-title">{{noticeData.title}}</view>
			<view class="notice-meta">
				<text class="notice-category">{{noticeData.category}}</text>
				<text class="notice-date">{{formatDate(noticeData.publishDate)}}</text>
				<text class="notice-author">{{noticeData.author || '管理员'}}</text>
			</view>
			<view class="notice-importance" v-if="noticeData.importance && noticeData.importance !== '普通'">
				<text :class="'importance-tag importance-' + getImportanceClass(noticeData.importance)">{{noticeData.importance}}</text>
			</view>
		</view>
		
		<!-- 活动内容 -->
		<view class="notice-content">
			<rich-text :nodes="formatContent(noticeData.content)"></rich-text>
		</view>
		
		<!-- 活动时间信息 -->
		<view class="activity-info" v-if="noticeType === 'activity'">
			<view class="activity-time">
				<view class="activity-item">
					<text class="activity-label">活动开始时间:</text>
					<text class="activity-value">{{formatDate(noticeData.startTime)}}</text>
				</view>
				<view class="activity-item" v-if="noticeData.endTime">
					<text class="activity-label">活动结束时间:</text>
					<text class="activity-value">{{formatDate(noticeData.endTime)}}</text>
				</view>
				<view class="activity-item" v-if="noticeData.location">
					<text class="activity-label">活动地点:</text>
					<text class="activity-value">{{noticeData.location}}</text>
				</view>
			</view>
		</view>
		
		<!-- 附件图片 -->
		<view class="attachments-section" v-if="noticeData.images && noticeData.images.length > 0">
			<view class="section-title">图片附件</view>
			<view class="image-list">
				<view class="image-item" v-for="(item, index) in noticeData.images" :key="index" @click="previewImage(item.url, index)">
					<image :src="item.url" mode="aspectFill" class="attachment-image"></image>
				</view>
			</view>
		</view>
		
		<!-- 附件文档 -->
		<view class="attachments-section" v-if="noticeData.documents && noticeData.documents.length > 0">
			<view class="section-title">文档附件</view>
			<view class="document-list">
				<view class="document-item" v-for="(item, index) in noticeData.documents" :key="index" @click="openDocument(item)">
					<view class="document-icon">📄</view>
					<view class="document-info">
						<view class="document-name">{{item.name}}</view>
						<view class="document-size">{{formatFileSize(item.size)}}</view>
					</view>
					<view class="document-action">下载</view>
				</view>
			</view>
		</view>
		
		<!-- 相关标签 -->
		<view class="tags-section" v-if="noticeData.tags && noticeData.tags.length > 0">
			<view class="tag-item" v-for="(tag, index) in noticeData.tags" :key="index">
				{{tag}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noticeData: {
					title: '',
					content: '',
					category: '',
					publishDate: '',
					author: '',
					importance: '',
					images: [],
					documents: [],
					tags: [],
					startTime: '', // 活动开始时间
					endTime: '',   // 活动结束时间
					location: ''   // 活动地点
				},
				noticeId: '',
				noticeType: 'notice',
				isLoading: true
			}
		},
		onLoad(options) {
			if (options.id) {
				this.noticeId = options.id;
				this.noticeType = options.type || 'notice'; // 默认为普通公告
				
				if (this.noticeType === 'activity') {
					this.getActivityDetail(); // 获取活动详情
				} else {
					this.getNoticeDetail(); // 获取普通公告详情
				}
			} else {
				this.showToast('参数错误');
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		methods: {
			// 获取公告详情
			async getNoticeDetail() {
				this.isLoading = true;
				uni.showLoading({
					title: '加载中...'
				});
				
				try {
					const noticeService = uniCloud.importObject('notice-service');
					const res = await noticeService.getNoticeDetail(this.noticeId);
					
					if (res && res.code === 0 && res.data) {
						this.noticeData = res.data;
							
							// 更新页面标题
							uni.setNavigationBarTitle({
								title: this.noticeData.title || '公告详情'
							});
							
							// 增加浏览次数
							this.increaseViewCount();
						} else {
							this.showToast('获取公告详情失败');
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						}
				} catch (err) {
						console.error('获取公告详情失败', err);
						this.showToast('网络错误，请稍后重试');
				} finally {
						this.isLoading = false;
						uni.hideLoading();
					}
			},
			
			// 获取活动详情
			async getActivityDetail() {
				this.isLoading = true;
				uni.showLoading({
					title: '加载中...'
				});
				
				console.log('获取活动详情，ID:', this.noticeId);
				
				try {
					const noticeService = uniCloud.importObject('notice-service');
					const res = await noticeService.getNoticeDetail(this.noticeId);
					
					if (res && res.code === 0 && res.data) {
						this.noticeData = res.data;
							
							// 更新页面标题
							uni.setNavigationBarTitle({
								title: this.noticeData.title || '活动详情'
							});
							
							// 增加浏览次数
							this.increaseViewCount();
						} else {
							// 处理错误情况
						const errorMsg = res.message || '获取活动详情失败';
							console.error('获取活动详情返回错误', errorMsg);
							this.showToast(errorMsg);
							
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						}
				} catch (err) {
						console.error('获取活动详情请求失败', err);
						this.showToast('网络错误，请稍后重试');
						
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
				} finally {
						this.isLoading = false;
						uni.hideLoading();
					}
			},
			
			// 增加公告浏览次数
			async increaseViewCount() {
				try {
					const interactionService = uniCloud.importObject('interaction-service');
					await interactionService.increaseNoticeViewCount(this.noticeId);
				} catch (err) {
						console.error('增加浏览次数失败', err);
					}
			},
			
			// 格式化日期
			formatDate(dateStr) {
				if (!dateStr) return '';
				
				const date = new Date(dateStr);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				
				return `${year}-${month}-${day}`;
			},
			
			// 获取重要性样式类
			getImportanceClass(importance) {
				if (importance === '紧急') {
					return 'urgent';
				} else if (importance === '重要') {
					return 'important';
				} else {
					return 'normal';
				}
			},
			
			// 格式化文件大小
			formatFileSize(size) {
				if (!size) return '';
				
				const kb = size / 1024;
				if (kb < 1024) {
					return kb.toFixed(2) + ' KB';
				} else {
					return (kb / 1024).toFixed(2) + ' MB';
				}
			},
			
			// 格式化内容
			formatContent(content) {
				if (!content) return '';
				
				// 支持简单的Markdown语法
				let html = content
					.replace(/\n/g, '<br/>')
					.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
					.replace(/\*(.*?)\*/g, '<em>$1</em>')
					.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" style="color:#1BAE76;text-decoration:underline;">$1</a>');
				
				return html;
			},
			
			// 预览图片
			previewImage(current, index) {
				const urls = this.noticeData.images.map(img => img.url);
				uni.previewImage({
					current: current,
					urls: urls
				});
			},
			
			// 打开文档
			openDocument(document) {
				// 在小程序环境中使用不同的打开方式
				// #ifdef MP-WEIXIN
				wx.downloadFile({
					url: document.url,
					success: (res) => {
						const filePath = res.tempFilePath;
						wx.openDocument({
							filePath: filePath,
							showMenu: true,
							success: () => {
								console.log('打开文档成功');
							},
							fail: (err) => {
								console.error('打开文档失败', err);
								this.showToast('打开文档失败');
							}
						});
					},
					fail: (err) => {
						console.error('下载文档失败', err);
						this.showToast('下载文档失败');
					}
				});
				// #endif
				
				// #ifdef APP-PLUS
				// APP环境使用系统浏览器打开
				plus.runtime.openURL(document.url);
				// #endif
				
				// #ifdef H5
				// H5环境使用新窗口打开
				window.open(document.url);
				// #endif
			},
			
			// 显示提示消息
			showToast(message) {
				uni.showToast({
					title: message,
					icon: 'none',
					duration: 2000
				});
			}
		}
	}
</script>

<style>
	.container {
		padding: 30rpx;
		background-color: #F8F8F8;
		min-height: 100vh;
	}
	
	/* 标题样式 */
	.notice-header {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}
	
	.notice-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
		line-height: 1.4;
	}
	
	.notice-meta {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-bottom: 10rpx;
		color: #999999;
		font-size: 24rpx;
	}
	
	.notice-category, .notice-date, .notice-author {
		margin-right: 20rpx;
		line-height: 1.5;
	}
	
	.notice-importance {
		margin-top: 10rpx;
	}
	
	.importance-tag {
		display: inline-block;
		padding: 4rpx 16rpx;
		border-radius: 30rpx;
		font-size: 22rpx;
	}
	
	.importance-important {
		background-color: rgba(255, 159, 67, 0.1);
		color: #FF9F43;
	}
	
	.importance-urgent {
		background-color: rgba(235, 77, 75, 0.1);
		color: #EB4D4B;
	}
	
	.importance-normal {
		background-color: rgba(27, 174, 118, 0.1);
		color: #1BAE76;
	}
	
	/* 内容样式 */
	.notice-content {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		line-height: 1.7;
		font-size: 28rpx;
		color: #333333;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}
	
	/* 活动信息样式 */
	.activity-info {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}
	
	.activity-time {
		display: flex;
		flex-direction: column;
	}
	
	.activity-item {
		display: flex;
		margin-bottom: 15rpx;
	}
	
	.activity-label {
		font-size: 26rpx;
		color: #666666;
		width: 180rpx;
	}
	
	.activity-value {
		font-size: 26rpx;
		color: #333333;
		flex: 1;
	}
	
	/* 附件样式 */
	.attachments-section {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}
	
	.section-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
		border-left: 6rpx solid #1BAE76;
		padding-left: 20rpx;
	}
	
	.image-list {
		display: flex;
		flex-wrap: wrap;
		margin: -10rpx;
	}
	
	.image-item {
		width: 220rpx;
		height: 220rpx;
		margin: 10rpx;
		border-radius: 8rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	
	.attachment-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.document-list {
		display: flex;
		flex-direction: column;
	}
	
	.document-item {
		display: flex;
		align-items: center;
		background-color: #F8F8F8;
		border-radius: 8rpx;
		padding: 20rpx;
		margin-bottom: 15rpx;
	}
	
	.document-icon {
		font-size: 40rpx;
		margin-right: 20rpx;
	}
	
	.document-info {
		flex: 1;
		overflow: hidden;
	}
	
	.document-name {
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 6rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.document-size {
		font-size: 24rpx;
		color: #999999;
	}
	
	.document-action {
		padding: 6rpx 20rpx;
		background-color: #1BAE76;
		color: #FFFFFF;
		font-size: 24rpx;
		border-radius: 30rpx;
	}
	
	/* 标签样式 */
	.tags-section {
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx 0;
	}
	
	.tag-item {
		padding: 8rpx 20rpx;
		background-color: #EEFAF5;
		color: #1BAE76;
		border-radius: 30rpx;
		font-size: 24rpx;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
	}
</style> 